<template>
  <div v-title data-title="进度查询">
    <div class="announcement">
      <i class="announcement-icon"></i>
      <span>选择申请办理的银行，进入对应的官方查询</span>
    </div>
    <div class="bank-list">
      <div class="bank" v-for="(item,index) in bankList" @click="redirectToThirdParty(item.channelUrl)">
        <img class="bank-logo" :src="item.channelLogo" v-if="!item.defaultImgShow" @error="imgError(index)"/>
        <default-img class="bank-logo" v-if="item.defaultImgShow"></default-img>
        <span class="bank-name">{{item.channelName}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import { httpReq } from '@/common/api'
  import DefaultImg from '@/components/defaultImg'
  export default{
      name:'process',
    data(){
          return{
            bankList:[],
            defaultImg:[]
          }
    },
    components:{
      DefaultImg
    },
    methods:{
      getBankList(){
        httpReq('GET','/list/as/app/financial/creditcard/bank').then((res)=>{
          this.bankList=res;
        })
      },
      imgError(index){
          this.$set(this.bankList[index],'defaultImgShow',true);
      },
      redirectToThirdParty(url){
        if(!url) return;
        window.location.href=url;
      }
    },
    created(){
      this.getBankList()
    }
  }
</script>
<style lang="stylus" scoped>
.announcement
  background-color #E6E6E6
  height .5rem
  width 100%
  padding 0 .32rem
  line-height .5rem
  color #666666
  display flex
  align-items center
  .announcement-icon
    background url("/static/img/system-sound@2x.png")no-repeat
    width .3rem
    height .3rem
    background-size 100%
    display inline-block
  span
    margin-left .14rem
.bank-list
  display flex
  flex-wrap wrap
  padding-bottom .2rem
  .bank
    display flex
    flex-direction column
    align-items center
    width 33.3%
    margin-top .5rem
    .bank-logo
      width .9rem
      height .9rem
      border-radius 50%
    .bank-name
      line-height .5rem
      margin-top .18rem
      color #333333
    .bank-desc
      line-height .34rem
      color #316BD8
      font-size .24rem


</style>
